<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Grid Over Series</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script type="module">
			import uPlot from "../dist/uPlot.esm.js";

			let xs = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
			let vals = [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10];

			let data = [
				xs,
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
			];

			const opts = {
				width: 1920,
				height: 600,
                title: "Grid Over Series",
                drawOrder: ["series", "axes"],
                axes: [
                    {
                        grid: {
                            show: true,
                            stroke: "rgba(0,0,0,0.2)",
                            width: 1,
                        },
                        ticks: {
                            show: true,
                            stroke: "rgba(0,0,0,0.2)",
                            width: 1,
                        }
                    },
                    {
                        grid: {
                            show: true,
                            stroke: "rgba(0,0,0,0.2)",
                            width: 1,
                        },
                        ticks: {
                            show: true,
                            stroke: "rgba(0,0,0,0.2)",
                            width: 1,
                        }
                    }
                ],
				scales: {
					x: {
						time: false,
					},
				},
				series: [
					{},
					{
						stroke: "#D32F2F",
						fill: "#E57373",
					//	width: 5,
						points: {
					//		size: 10,
						},
					},
					{
						stroke: "#2E7D32",
						fill: "#66BB6A",
						points: {
					//		size: 10,
						},
					},
					{
						stroke: "#1565C0",
						fill: "#42A5F5",
						points: {
					//		size: 10,
						},
					},
				],
			};

			let u = new uPlot(opts, data, document.body);
		</script>
	</body>
</html>
